<!DOCTYPE html>
<html>

    <head>
    
        <title>Line Fitting Visualization</title>
        <script src ="example-data.js"></script>
        <script src ="work-data.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
        <link href="line-fitter.css" rel="stylesheet">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    </head>
    
<body>
    <audio class = "error" src = "error.mp3"></audio>
        <!-- the navigation bar at the top of the page is created here -->
        <div class = "navbar navbar-inverse">
            <div class = "navbar-inner">
                <div class = "container">
                <a class = "brand pull-right" href="#">Linear Regression Applet</a>
                <a class = "brand" href="#aboutModal" data-toggle = "modal">About</a>
                <a class = "brand" id = "elem" rel = "popover" data-placement = "bottom" data-trigger = "hover" data-content = "Access our GitHub Repository" href = "https://github.com/laurabreiman/line-fitter"><i class = "icon-github-sign"></i></a>
                <a class = "brand" id = "elem1" rel = "popover" data-placement = "bottom" data-trigger = "hover" data-content = "Found Bugs? Report to smohan94@mit.edu or lauracle@mit.edu" href = "#"><i class = "icon-bug"></i></a>
               
                </div>
            </div>
        </div>

<!-- generating the about modal here -->

<div id="aboutModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class = "tabs">
        <ul id="myTab" class="nav nav-tabs">
          <li><a href="#instructions" data-toggle="tab">Instructions</a></li>
          <li><a href="#credits" data-toggle="tab">Credits</a></li>
          <li><a href="#help" data-toggle="tab">Help</a></li>
          <li><a href="#embed" data-toggle = "tab">Embedding</a>
        </ul>
        </div>
    </div>


    <div class="modal-body">
     <div class = "tab-content">
        <div class="tab-pane fade in" id="credits"><text style = "font-size:14pt"><p>Created by: Laura Breiman and Samarth Mohan</p> Our Mentor: <a href="http://people.csail.mit.edu/fredo/">Professor Fr&eacute;do Durand</a><br> Tools Used: D3, jQuery, jQueryUI, and Bootstrap</text></div>
        <div class ="tab-pane fade in active" id = "instructions"><h3>How the Widget works:</h3>
            <text style = "font-size:12pt;font-family:Times;">
                1. In order to add point values, enter the x and y coordinates in the respective input fields and hit 'Add Point.'
                <br>
                2. The point table above contains the xy coordinates of the point, the predicted y and the error and squared error values. You can edit the Observed X and Observed Y by clicking on the number and typing in the number of your choice. Then, click on the graph and the graph will update itself.
                <br>
                3. If you don't have a defined set of points, you can create random points. Simply enter the number of points you wish to generate in the '# of points' box and hit 'Randomize Points'. This will generate the amount of random points that you specified.
                <br>
                4.To plot the line of best-fit, check the Plot Best-Fit checkbox. That will display the line of best fit on your graph.
                <br>
                5. You will also notice a graph that appears between the graphing area and the table. This graph indicates the value of the total squared error. In other words, as your error increases, the graph's height will increase with it. 
                <br>
                6. You can also drag points around the graph and see how they change the line of best fit. Only visible points can be dragged. In addition, you can use the sliders (located below 'Degree of Polynomial') to change the coefficient values and see how the line of best fit is changing.
                <br>
                7. If you click on a point, the point will be temporarily removed from the point list. You will notice that the checkbox corresponding to that point will be unchecked. 
                <br>
                8.You can include the point again by either clicking the checkbox or clicking on the point again. This feature will allow you to look at how a specific point affects the best fit of the graph. 

            </text>

        </div>

        <div class ="tab-pane fade in" id = "help">Help</div>
        <div class ="tab-pane fade in" id = "embed"><h3>How to use our widget in your own webpage</h3><br><text style = "font-size:10pt;"><strong>If you wish to use the applet as is,  </strong> first clone our GitHub Repository so that you all the necessary files. <br>Afterwards, simply <strong>include the following HTML Code </strong> into your own code: </text>
            <div class = "embedcode">
                <pre>
&lt;head&gt;
....                 
&lt;script src ="example-data.js"&gt;&lt;/script&gt;
&lt;script src ="work-data.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"&gt;
&lt;link href="line-fitter.css" rel="stylesheet"&gt;
&lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
&lt;script src="line-fitter.js"&gt;&lt;/script&gt;
&lt;/head&gt;
...
&lt;body&gt;
...
&lt;div class="line-fit"&gt;&lt;/div&gt;
...
&lt;/&gt;
                    
                </pre>
            </div>
            <text style = "font-size:12pt">If you want modify the width and height, simply change the width and height accordingly</text>
            <p><code>...class = "line-fitter" style = "width: ; height: ;"</code></p>
        </div>
    </div>
</div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" style = "margin-left:320px">Close</button>
    </div>
</div>    


    <div class="line-fit"></div>
    <script src="line-fitter.js"></script>
</body>

</html>